<template>
    <!-- destroyOnClose -->
    <a-modal
        :bodyStyle="{ padding: 0, height: '600px', overflow: 'auto' }"
        centered
        :footer="null"
        v-model:visible="visible"
        :width="800"
        v-if="visible"
    >
        <template #title>
            <flexbox>
                <span>{{ detailData.requestName }}</span>
                <a-tag color="warning" style="margin-left: 8px"> {{ detailData.taskName }} </a-tag>
            </flexbox>
        </template>
        <div class="page-wrap page-wrap-ql">
            <div class="page-cont">
                <template v-for="(item, index) of showComs" :key="index">
                    <component :ref="item.comName" :is="item.comName" :detail="detailData" :modelName="item.modelName" isHistoryModal disabled />
                    <a-divider style="margin: 0" v-if="index !== showComs.length - 1" />
                </template>
            </div>
        </div>
    </a-modal>
</template>

<script lang="ts">
import RequireAcceptInfo from '@/views/taskRequire/taskDetail/components/RequireAcceptInfo.vue';
import RequireAdminCheck from '@/views/taskRequire/taskDetail/components/RequireAdminCheck.vue';
import TaskRequireAnalyse from '@/views/taskRequire/taskDetail/components/TaskRequireAnalyse.vue';
import RequireDistributation from '@/views/taskRequire/taskDetail/components/RequireDistribution.vue';
import FirstRequire from '@/views/taskRequire/taskDetail/components/FirstRequire.vue';
import { defineComponent, reactive, toRefs } from 'vue';
interface State {
    showComs: any[];
    visible: boolean;
    detailData: any;
}
export default defineComponent({
    components: {
        RequireAcceptInfo,
        RequireAdminCheck,
        TaskRequireAnalyse,
        RequireDistributation,
        FirstRequire
    },
    setup() {
        const allComps = [
            {
                comName: 'FirstRequire',
                modelName: '发起需求',
                permissions: ['1']
            }, // 发起需求
            {
                comName: 'RequireAcceptInfo',
                modelName: '需求受理信息',
                permissions: ['2', '5']
            }, // 需求受理信息
            {
                comName: 'RequireAdminCheck',
                modelName: '需求管理员审核',
                permissions: ['2']
            }, // 需求管理员审核
            {
                comName: 'TaskRequireAnalyse',
                modelName: '业务需求分析',
                permissions: ['3']
            }, // 需求分析
            {
                comName: 'RequireDistributation',
                modelName: '需求分发',
                permissions: ['4']
            } // 需求分发
        ];
        const state = reactive<State>({
            showComs: [], // 可以显示的模块数组
            detailData: {
                stage: '1',
                requestName: '',
                taskName: ''
            },
            visible: false
        });
        const open = (detailData) => {
            state.visible = true;
            state.showComs = [];
            state.detailData = detailData;
            matchCom(detailData.stage);
        };
        // 匹配可显示的模块
        const matchCom = (stage: string) => {
            state.showComs = allComps.filter((item) => item.permissions.includes(stage));
        };
        return {
            ...toRefs(state),
            open
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    position: relative;
    height: 100%;
    .page-cont {
        min-height: 516px;
        position: relative;
        background: #fff;
    }
}
</style>
